---
title: Introduction
description: Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
---

Nyxb UI is a collection of re-usable components. It primarily features components, blocks, and templates geared towards creating landing pages and user-facing marketing materials.

This is **NOT** a component library. It's a collection of re-usable components that you can copy and paste into your apps.

**What do you mean by not a component library?**

I mean you do not install it as a dependency. It is not available or distributed via npm.

Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.

_Use this as a reference to build your own component libraries._

## Philosophy

__I personally believe that good design contributes significant value to software. It's one of the main methods of establishing trust between you and an internet stranger__. Trust is important for internet businesses because it is the first thing a visitor evaluates before pulling out their credit card and becoming a customer.

Some questions visitors might ask themselves are:
- "Is this company legit?"
- "Who else is using it?"
- "Can I trust them with my personal data?"

__Poor design reflects poorly on your team.__ It comes off as lazy, unfinished, and unstable. It shows that the team doesn't care about user experience. 

__Good design indicates that the team behind has their shit together.__ I can probably expect good things from them in the future. 

It makes me think "if they care so much about these tiny details, they must care a lot about other things in the company, including their customers!". 

A great example of this in play is https://linear.app landing page which I first came across in 2020. I didn't even need to try the product but I already knew that it *must* be good.

This library is heavily inspired by [https://nyxbui.design](https://nyxbui.design).


## FAQ


<Accordion type="multiple">

<AccordionItem value="faq-1">
	<AccordionTrigger>
		Why copy/paste and not packaged as a dependency?
	</AccordionTrigger>
	<AccordionContent>
The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.

Start with some sensible defaults, then customize the components to your needs.

One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. _The design of your components should be separate from their implementation._

</AccordionContent>
</AccordionItem>

<AccordionItem value="faq-2">
  <AccordionTrigger>
    Do you plan to publish it as an npm package?
  </AccordionTrigger>
  <AccordionContent>
    No. I have no plans to publish it as an npm package.
  </AccordionContent>
</AccordionItem>

<AccordionItem value="faq-3">
<AccordionTrigger>
Which frameworks are supported?
</AccordionTrigger>
<AccordionContent>

You can use any framework that supports React. [Next.js](https://nyxbui.design/docs/installation/next), [Astro](https://nyxbui.design/docs/installation/astro), [Remix](https://nyxbui.design/docs/installation/remix), [Gatsby](https://nyxbui.design/docs/installation/gatsby) etc.

</AccordionContent>
</AccordionItem>

<AccordionItem value="faq-4">
	<AccordionTrigger>
	Can I use this in my project?
	</AccordionTrigger>
	<AccordionContent>
Yes. Free to use for personal and commercial projects. No attribution required.

But hey, let me know if you do. I'd love to see what you build.

    </AccordionContent>

</AccordionItem>

</Accordion>
